<div *ngIf="isSelfDevelop">
  <span class="inline-block !w-[16.66666667%] text-right mb-2.5"
    >上传文件到网站根目录：</span
  >
  <app-upload-file />
</div>

<form nz-form [formGroup]="validateForm" class="!pb-20">
  <nz-form-item>
    <nz-form-label [nzSpan]="4">{{ $t('_webLogo') }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <label id="file">
        <img [src]="settings.favicon" class="w-14 h-14 object-cover" />
        <span>
          {{ $t('_updateLogo') }}
        </span>
        <app-upload-image
          (onChange)="onLogoChange($event, 'favicon')"
        ></app-upload-image>
        <div>
          <input
            class="logo-input"
            nz-input
            [value]="settings.favicon"
            (change)="onLogoChange($event, 'favicon')"
          />
        </div>
      </label>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" nzRequired>{{ $t('_title') }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <input nz-input formControlName="title" />
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4">{{ $t('_webDesc') }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <input nz-input formControlName="description" />
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4">{{ $t('_keywords') }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <input nz-input formControlName="keywords" />
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4">{{ $t('_defLanguage') }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <nz-select formControlName="language">
        <nz-option nzValue="zh-CN" nzLabel="简体中文"></nz-option>
        <nz-option nzValue="en" nzLabel="English"></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item *ngIf="!isSelfDevelop">
    <nz-form-label [nzSpan]="4">{{ $t('_imageCDN') }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <nz-select formControlName="gitHubCDN">
        <nz-option
          nzValue="gcore.jsdelivr.net"
          nzLabel="gcore.jsdelivr.net"
        ></nz-option>
        <nz-option
          nzValue="testingcf.jsdelivr.net"
          nzLabel="testingcf.jsdelivr.net"
        ></nz-option>
        <nz-option
          nzValue="img.jsdmirror.com"
          nzLabel="img.jsdmirror.com"
        ></nz-option>
        <nz-option
          nzValue="cdn.jsdelivr.net"
          nzLabel="cdn.jsdelivr.net"
        ></nz-option>
      </nz-select>

      <div class="mt-2.5">
        <a
          target="_blank"
          [href]="
            'https://' + cdnUrl + '/gh/xjh22222228/public@gh-pages/nav/logo.svg'
          "
          >{{
            'https://' + cdnUrl + '/gh/xjh22222228/public@gh-pages/nav/logo.svg'
          }}</a
        >
      </div>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4">Email</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <input
        nz-input
        formControlName="email"
        [placeholder]="$t('_submitNotice')"
      />
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4">{{ $t('_pageLoad') }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <nz-radio-group formControlName="loading">
        <label nz-radio nzValue="random">{{ $t('_random') }}</label>
        <label nz-radio nzValue="null">{{ $t('_noSet') }}</label>
        <label nz-radio nzValue="loading1">loading1</label>
        <label nz-radio nzValue="loading2">loading2</label>
        <label nz-radio nzValue="loading3">loading3</label>
        <label nz-radio nzValue="loading4">loading4</label>
      </nz-radio-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4">DIY Loading code</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <textarea
        nz-input
        formControlName="loadingCode"
        [nzAutosize]="textareaSize"
        placeholder="<div class='text-center'>Loading...</div>"
      ></textarea>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" [nzNoColon]="true">{{
      $t('_allowUser')
    }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <nz-checkbox-group
        [nzOptions]="actionOptions"
        formControlName="userActions"
      ></nz-checkbox-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" [nzNoColon]="true">{{
      $t('_enableSEO')
    }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <label nz-checkbox formControlName="openSEO"></label>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item *ngIf="!isSelfDevelop">
    <nz-form-label [nzSpan]="4" [nzNoColon]="true">{{
      $t('_showGithub')
    }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <label nz-checkbox formControlName="showGithub"></label>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" [nzNoColon]="true">{{
      $t('_showLanguage')
    }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <label nz-checkbox formControlName="showLanguage"></label>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" [nzNoColon]="true">{{
      $t('_showRate')
    }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <label nz-checkbox formControlName="showRate"></label>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" [nzNoColon]="true">{{
      $t('_displaySwitchTheme')
    }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <label nz-checkbox formControlName="showThemeToggle"></label>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" [nzNoColon]="true">{{
      $t('_openSearch')
    }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <label nz-checkbox formControlName="openSearch"></label>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" [nzNoColon]="true">{{
      $t('_defTheme')
    }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <nz-radio-group formControlName="theme">
        <label nz-radio nzValue="Light">Light</label>
        <label nz-radio nzValue="Super">Super</label>
        <label nz-radio nzValue="Sim">Sim</label>
        <label nz-radio nzValue="Side">Side</label>
        <label nz-radio nzValue="App">App</label>
        <label nz-radio nzValue="Shortcut">Shortcut</label>
      </nz-radio-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" [nzNoColon]="true">{{
      $t('_appTheme')
    }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <nz-radio-group formControlName="appTheme">
        <label nz-radio nzValue="Current">{{ $t('_followPage') }}</label>
        <label nz-radio nzValue="App">App</label>
        <label nz-radio nzValue="Light">Light</label>
        <label nz-radio nzValue="Sim">Sim</label>
        <label nz-radio nzValue="Side">Side</label>
        <label nz-radio nzValue="Shortcut">Shortcut</label>
      </nz-radio-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4">{{ $t('_createWebKey') }}</nz-form-label>
    <nz-form-control [nzSpan]="10">
      <input
        nz-input
        formControlName="createWebKey"
        maxlength="1"
        class="max-w-10"
      />
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4">{{ $t('_headHtml') }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <textarea
        nz-input
        formControlName="headerContent"
        [nzAutosize]="textareaSize"
        [placeholder]="$t('_headCode')"
      ></textarea>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4">{{ $t('_footHtml') }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <textarea
        nz-input
        formControlName="footerContent"
        [nzAutosize]="textareaSize"
      ></textarea>

      <div
        [innerHTML]="footTemplate"
        class="text-center mt-2.5"
        style="background: rgba(0, 0, 0, 0.028)"
      ></div>

      <div class="mt-2.5">{{ $t('_footTemplateDesc') }}</div>
      <div class="my-2.5" [innerHTML]="$t('_builtTailwind') | safeHtml"></div>

      <nz-radio-group
        formControlName="footTemplate"
        (ngModelChange)="onFootTemplateChange($event)"
      >
        <label nz-radio nzValue="footTemplate1"
          >{{ $t('_footTemplate') }}1</label
        >
        <label nz-radio nzValue="footTemplate2"
          >{{ $t('_footTemplate') }}2</label
        >
        <label nz-radio nzValue="footTemplate3"
          >{{ $t('_footTemplate') }}3</label
        >
      </nz-radio-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4">{{ $t('_requestAddress') }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <input
        nz-input
        formControlName="actionUrl"
        [placeholder]="$t('_requestTip')"
      />
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4">{{ $t('_components') }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <nz-checkbox-group
        [nzOptions]="componentOptions"
        formControlName="componentOptions"
      ></nz-checkbox-group>
    </nz-form-control>
  </nz-form-item>

  <div class="divider"></div>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" [nzNoColon]="true">PWA Enable</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <label nz-checkbox formControlName="pwaEnable"></label>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4">PWA Name</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <input nz-input formControlName="pwaName" maxlength="10" />
    </nz-form-control>
  </nz-form-item>

  <nz-form-item *ngIf="isSelfDevelop">
    <nz-form-label [nzSpan]="4">PWA Icon</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <nz-input-group [nzSuffix]="suffixIconPwa">
        <input formControlName="pwaIcon" nz-input placeholder="512x512.png" />
      </nz-input-group>

      <ng-template #suffixIconPwa>
        <ng-content>
          <app-upload-image
            (onChange)="onLogoChange($event, 'pwaIcon')"
            accept="image/png"
          ></app-upload-image>
        </ng-content>
      </ng-template>
    </nz-form-control>
  </nz-form-item>

  <div class="divider"></div>

  <nz-tabset [nzSelectedIndex]="tabActive">
    <nz-tab [nzTitle]="'Light ' + $t('_theme')">
      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_docTitle') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <input
            nz-input
            formControlName="lightDocTitle"
            [placeholder]="$t('_defaultTitle')"
          />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_cardStyle') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <nz-radio-group formControlName="lightCardStyle">
            <label nz-radio nzValue="standard">{{ $t('_standard') }}</label>
            <label nz-radio nzValue="poster">{{ $t('_poster') }}</label>
            <label nz-radio nzValue="column">{{ $t('_column') }}</label>
            <label nz-radio nzValue="example">{{ $t('_simplicity') }}</label>
            <label nz-radio nzValue="retro">{{ $t('_retro') }}</label>
            <label nz-radio nzValue="original">{{ $t('_original') }}</label>
            <label nz-radio nzValue="icon">{{ $t('_icon') }}</label>
          </nz-radio-group>

          <div class="mt-2.5 w-96 pointer-events-none">
            <app-card
              [dataSource]="webDemoData"
              [cardStyle]="validateForm.get('lightCardStyle')?.value"
            />
          </div>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_navOver') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <nz-radio-group formControlName="lightOverType">
            <label nz-radio nzValue="overflow">{{ $t('_scrollBar') }}</label>
            <label nz-radio nzValue="ellipsis">{{ $t('_ellipsis') }}</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item class="sim-ban">
        <nz-form-label [nzSpan]="4">{{ $t('_sidebarImg') }}</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-table
            #basicTable
            [nzData]="settings.lightImages"
            [nzShowPagination]="false"
          >
            <thead>
              <tr>
                <th class="min-w-[260px]">{{ $t('_backgroundImage') }}</th>
                <th class="min-w-[300px]">{{ $t('_jumpAddr') }}</th>
                <th class="min-w-[200px]">{{ $t('_action') }}</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of settings.lightImages; index as idx">
                <td class="whitespace-nowrap">
                  <img [src]="data['src']" *ngIf="data['src']" class="icon" />
                  <div>
                    <input
                      nz-input
                      type="text"
                      [value]="data['src']"
                      class="!w-[80%] !mr-2.5 !mt-2.5"
                      (change)="onChangeBannerUrl($event, 'lightImages', idx)"
                    />
                    <app-upload-image
                      (onChange)="onBannerChange($event, 'lightImages', idx)"
                    />
                  </div>
                </td>
                <td>
                  <textarea
                    [value]="data['url']"
                    (change)="onChangeJumpUrl($event, 'lightImages', idx)"
                    nz-input
                  ></textarea>
                </td>
                <td class="select-none">
                  <a (click)="handleMoveUp('lightImages', idx)">{{
                    $t('_moveUp')
                  }}</a>
                  <a
                    class="mx-2"
                    (click)="handleMoveDown('lightImages', idx)"
                    >{{ $t('_moveDown') }}</a
                  >
                  <a
                    nz-popconfirm
                    nzPopconfirmPlacement="rightTop"
                    nzOkType="danger"
                    [nzPopconfirmTitle]="$t('_confirmDel')"
                    nzPopconfirmPlacement="bottom"
                    (nzOnConfirm)="onDeleteBanner('lightImages', idx)"
                    class="!text-red-500"
                  >
                    {{ $t('_del') }}
                  </a>
                </td>
              </tr>
            </tbody>
          </nz-table>
          <a (click)="onAddBanner('lightImages')" class="mt-2.5 !block">{{
            $t('_add')
          }}</a>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_footHtml') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <textarea
            nz-input
            formControlName="lightFooterHTML"
            [nzAutosize]="textareaSize"
          ></textarea>
        </nz-form-control>
      </nz-form-item>
    </nz-tab>

    <nz-tab [nzTitle]="'Super ' + $t('_theme')">
      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_docTitle') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <input
            nz-input
            formControlName="superDocTitle"
            [placeholder]="$t('_defaultTitle')"
          />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_title') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <input
            nz-input
            formControlName="superTitle"
            [placeholder]="$t('_defTitle4')"
          />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_cardStyle') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <nz-radio-group formControlName="superCardStyle">
            <label nz-radio nzValue="standard">{{ $t('_standard') }}</label>
            <label nz-radio nzValue="poster">{{ $t('_poster') }}</label>
            <label nz-radio nzValue="column">{{ $t('_column') }}</label>
            <label nz-radio nzValue="example">{{ $t('_simplicity') }}</label>
            <label nz-radio nzValue="retro">{{ $t('_retro') }}</label>
            <label nz-radio nzValue="original">{{ $t('_original') }}</label>
            <label nz-radio nzValue="icon">{{ $t('_icon') }}</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_navOver') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <nz-radio-group formControlName="superOverType">
            <label nz-radio nzValue="overflow">{{ $t('_scrollBar') }}</label>
            <label nz-radio nzValue="ellipsis">{{ $t('_ellipsis') }}</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item class="sim-ban">
        <nz-form-label [nzSpan]="4">{{ $t('_sidebarImg') }}</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-table
            #basicTable
            [nzData]="settings.superImages"
            [nzShowPagination]="false"
          >
            <thead>
              <tr>
                <th class="min-w-[260px]">{{ $t('_backgroundImage') }}</th>
                <th class="min-w-[300px]">{{ $t('_jumpAddr') }}</th>
                <th class="min-w-[200px]">{{ $t('_action') }}</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of settings.superImages; index as idx">
                <td class="whitespace-nowrap">
                  <img [src]="data['src']" *ngIf="data['src']" class="icon" />

                  <div>
                    <input
                      nz-input
                      type="text"
                      [value]="data['src']"
                      class="!w-[80%] !mr-2.5 !mt-2.5"
                      (change)="onChangeBannerUrl($event, 'superImages', idx)"
                    />
                    <app-upload-image
                      (onChange)="onBannerChange($event, 'superImages', idx)"
                    />
                  </div>
                </td>
                <td>
                  <textarea
                    [value]="data['url']"
                    (change)="onChangeJumpUrl($event, 'superImages', idx)"
                    nz-input
                  ></textarea>
                </td>
                <td class="select-none">
                  <a (click)="handleMoveUp('superImages', idx)">{{
                    $t('_moveUp')
                  }}</a>
                  <a
                    class="mx-2"
                    (click)="handleMoveDown('superImages', idx)"
                    >{{ $t('_moveDown') }}</a
                  >
                  <a
                    nz-popconfirm
                    nzPopconfirmPlacement="rightTop"
                    nzOkType="danger"
                    [nzPopconfirmTitle]="$t('_confirmDel')"
                    nzPopconfirmPlacement="bottom"
                    (nzOnConfirm)="onDeleteBanner('superImages', idx)"
                    class="!text-red-500"
                  >
                    {{ $t('_del') }}
                  </a>
                </td>
              </tr>
            </tbody>
          </nz-table>
          <a (click)="onAddBanner('superImages')" class="mt-2.5 !block">{{
            $t('_add')
          }}</a>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_footHtml') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <textarea
            nz-input
            formControlName="superFooterHTML"
            [nzAutosize]="textareaSize"
          ></textarea>
        </nz-form-control>
      </nz-form-item>
    </nz-tab>

    <nz-tab [nzTitle]="'Sim ' + $t('_theme')">
      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_docTitle') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <input
            nz-input
            formControlName="simDocTitle"
            [placeholder]="$t('_defaultTitle')"
          />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_title') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <input nz-input formControlName="simTitle" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_cardStyle') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <nz-radio-group formControlName="simCardStyle">
            <label nz-radio nzValue="standard">{{ $t('_standard') }}</label>
            <label nz-radio nzValue="poster">{{ $t('_poster') }}</label>
            <label nz-radio nzValue="column">{{ $t('_column') }}</label>
            <label nz-radio nzValue="example">{{ $t('_simplicity') }}</label>
            <label nz-radio nzValue="retro">{{ $t('_retro') }}</label>
            <label nz-radio nzValue="original">{{ $t('_original') }}</label>
            <label nz-radio nzValue="icon">{{ $t('_icon') }}</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_navOver') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <nz-radio-group formControlName="simOverType">
            <label nz-radio nzValue="overflow">{{ $t('_scrollBar') }}</label>
            <label nz-radio nzValue="ellipsis">{{ $t('_ellipsis') }}</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item class="sim-ban">
        <nz-form-label [nzSpan]="4">Banner</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-table
            #basicTable
            [nzData]="settings.simThemeImages"
            [nzShowPagination]="false"
          >
            <thead>
              <tr>
                <th class="min-w-[260px]">{{ $t('_backgroundImage') }}</th>
                <th class="min-w-[300px]">{{ $t('_jumpAddr') }}</th>
                <th class="min-w-[200px]">{{ $t('_action') }}</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of settings.simThemeImages; index as idx">
                <td class="whitespace-nowrap">
                  <img [src]="data['src']" *ngIf="data['src']" class="icon" />
                  <div>
                    <input
                      nz-input
                      type="text"
                      [value]="data['src']"
                      class="!w-[80%] !mr-2.5 !mt-2.5"
                      (change)="
                        onChangeBannerUrl($event, 'simThemeImages', idx)
                      "
                    />
                    <app-upload-image
                      (onChange)="onBannerChange($event, 'simThemeImages', idx)"
                    />
                  </div>
                </td>
                <td>
                  <textarea
                    [value]="data['url']"
                    (change)="onChangeJumpUrl($event, 'simThemeImages', idx)"
                    nz-input
                  ></textarea>
                </td>
                <td class="select-none">
                  <a (click)="handleMoveUp('simThemeImages', idx)">{{
                    $t('_moveUp')
                  }}</a>
                  <a
                    class="mx-2"
                    (click)="handleMoveDown('simThemeImages', idx)"
                    >{{ $t('_moveDown') }}</a
                  >
                  <a
                    nz-popconfirm
                    nzPopconfirmPlacement="rightTop"
                    nzOkType="danger"
                    [nzPopconfirmTitle]="$t('_confirmDel')"
                    nzPopconfirmPlacement="bottom"
                    (nzOnConfirm)="onDeleteBanner('simThemeImages', idx)"
                    class="!text-red-500"
                  >
                    {{ $t('_del') }}
                  </a>
                </td>
              </tr>
            </tbody>
          </nz-table>
          <a (click)="onAddBanner('simThemeImages')" class="mt-2.5 !block">{{
            $t('_add')
          }}</a>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_autoPlay') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <label nz-checkbox formControlName="simThemeAutoplay"></label>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_bannerHeight') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <nz-slider
            formControlName="simThemeHeight"
            [nzMin]="0"
            [nzMax]="1000"
          ></nz-slider>
          <div>{{ $t('_bannerTip') }}</div>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_desc') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <textarea
            nz-input
            formControlName="simThemeDesc"
            [nzAutosize]="textareaSize"
          ></textarea>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_footHtml') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <textarea
            nz-input
            formControlName="simFooterHTML"
            [nzAutosize]="textareaSize"
          ></textarea>
        </nz-form-control>
      </nz-form-item>
    </nz-tab>

    <nz-tab [nzTitle]="'Side ' + $t('_theme')">
      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_docTitle') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <input
            nz-input
            formControlName="sideDocTitle"
            [placeholder]="$t('_defaultTitle')"
          />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_sidebarTitle') }}</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <input
            nz-input
            formControlName="sideTitle"
            [placeholder]="$t('_defTitle4')"
          />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_logoImg') }}</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-input-group [nzSuffix]="suffixLogo">
            <input nz-input formControlName="logo" />
          </nz-input-group>
          <ng-template #suffixLogo>
            <app-upload-image (onChange)="onLogoChange($event, 'logo')" />
          </ng-template>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_logoDarkImg') }}</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-input-group [nzSuffix]="suffixDarkLogo">
            <input nz-input formControlName="darkLogo" />
          </nz-input-group>
          <ng-template #suffixDarkLogo>
            <app-upload-image (onChange)="onLogoChange($event, 'darkLogo')" />
          </ng-template>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_cardStyle') }}</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-radio-group formControlName="sideCardStyle">
            <label nz-radio nzValue="standard">{{ $t('_standard') }}</label>
            <label nz-radio nzValue="poster">{{ $t('_poster') }}</label>
            <label nz-radio nzValue="column">{{ $t('_column') }}</label>
            <label nz-radio nzValue="example">{{ $t('_simplicity') }}</label>
            <label nz-radio nzValue="retro">{{ $t('_retro') }}</label>
            <label nz-radio nzValue="original">{{ $t('_original') }}</label>
            <label nz-radio nzValue="icon">{{ $t('_icon') }}</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4" [nzNoColon]="true">{{
          $t('_menuCollapse')
        }}</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <label nz-checkbox formControlName="sideCollapsed"></label>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item class="sim-ban">
        <nz-form-label [nzSpan]="4">Banner</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-table
            #basicTable
            [nzData]="settings.sideThemeImages"
            [nzShowPagination]="false"
          >
            <thead>
              <tr>
                <th class="min-w-[260px]">{{ $t('_backgroundImage') }}</th>
                <th class="min-w-[300px]">{{ $t('_jumpAddr') }}</th>
                <th class="min-w-[200px]">{{ $t('_action') }}</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of settings.sideThemeImages; index as idx">
                <td class="whitespace-nowrap">
                  <img [src]="data['src']" *ngIf="data['src']" class="icon" />
                  <div>
                    <input
                      nz-input
                      type="text"
                      [value]="data['src']"
                      class="!w-[80%] !mr-2.5 !mt-2.5"
                      (change)="
                        onChangeBannerUrl($event, 'sideThemeImages', idx)
                      "
                    />
                    <app-upload-image
                      (onChange)="
                        onBannerChange($event, 'sideThemeImages', idx)
                      "
                    />
                  </div>
                </td>
                <td>
                  <textarea
                    [value]="data['url']"
                    (change)="onChangeJumpUrl($event, 'sideThemeImages', idx)"
                    nz-input
                  ></textarea>
                </td>
                <td class="select-none">
                  <a (click)="handleMoveUp('sideThemeImages', idx)">{{
                    $t('_moveUp')
                  }}</a>
                  <a
                    class="mx-2"
                    (click)="handleMoveDown('sideThemeImages', idx)"
                    >{{ $t('_moveDown') }}</a
                  >
                  <a
                    nz-popconfirm
                    nzPopconfirmPlacement="rightTop"
                    nzOkType="danger"
                    [nzPopconfirmTitle]="$t('_confirmDel')"
                    nzPopconfirmPlacement="bottom"
                    (nzOnConfirm)="onDeleteBanner('sideThemeImages', idx)"
                    class="!text-red-500"
                  >
                    {{ $t('_del') }}
                  </a>
                </td>
              </tr>
            </tbody>
          </nz-table>
          <a (click)="onAddBanner('sideThemeImages')" class="mt-2.5 !block">{{
            $t('_add')
          }}</a>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_autoPlay') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <label nz-checkbox formControlName="sideThemeAutoplay"></label>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_bannerHeight') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <nz-slider
            formControlName="sideThemeHeight"
            [nzMin]="0"
            [nzMax]="1000"
          ></nz-slider>
          <div>{{ $t('_bannerTip') }}</div>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_footHtml') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <textarea
            nz-input
            formControlName="sideFooterHTML"
            [nzAutosize]="textareaSize"
          ></textarea>
        </nz-form-control>
      </nz-form-item>
    </nz-tab>

    <nz-tab [nzTitle]="'Shortcut ' + $t('_theme')">
      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_docTitle') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <input
            nz-input
            formControlName="shortcutDocTitle"
            [placeholder]="$t('_defaultTitle')"
          />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_title') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <input nz-input formControlName="shortcutTitle" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">Dock</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <nz-slider
            formControlName="shortcutDockCount"
            [nzMin]="0"
            [nzMax]="15"
          ></nz-slider>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4" [nzNoColon]="true">{{
          $t('_showWeather')
        }}</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <label nz-checkbox formControlName="shortcutThemeShowWeather"></label>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item class="sim-ban">
        <nz-form-label [nzSpan]="4">{{ $t('_backgroundImage') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <img [src]="settings.shortcutThemeImages[0]['src']" />

          <input
            nz-input
            type="text"
            [value]="settings.shortcutThemeImages[0]['src']"
            (change)="onShortcutImgChange($event)"
            class="max-w-full w-full !mt-2.5"
          />
          <app-upload-image (onChange)="onShortcutImgChange($event)" />
        </nz-form-control>
      </nz-form-item>
    </nz-tab>

    <nz-tab [nzTitle]="'App ' + $t('_theme')">
      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_docTitle') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <input
            nz-input
            formControlName="appDocTitle"
            [placeholder]="$t('_defaultTitle')"
          />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="4">{{ $t('_cardStyle') }}</nz-form-label>
        <nz-form-control [nzSpan]="10">
          <nz-radio-group formControlName="appCardStyle">
            <label nz-radio nzValue="standard">{{ $t('_standard') }}</label>
            <label nz-radio nzValue="poster">{{ $t('_poster') }}</label>
            <label nz-radio nzValue="column">{{ $t('_column') }}</label>
            <label nz-radio nzValue="example">{{ $t('_simplicity') }}</label>
            <label nz-radio nzValue="retro">{{ $t('_retro') }}</label>
            <label nz-radio nzValue="original">{{ $t('_original') }}</label>
            <label nz-radio nzValue="icon">{{ $t('_icon') }}</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
    </nz-tab>
  </nz-tabset>

  <div class="divider"></div>
  <h2 class="title">{{ $t('_spiderRule') }}</h2>
  <div class="mb-2.5" *ngIf="!isSelfDevelop">
    <b>{{ $t('_spiderTip') }}</b>
  </div>
  <div class="mb-2.5">
    <b>{{ $t('_spiderNetTip') }}</b>
  </div>
  <div class="mb-2.5" *ngIf="!isSelfDevelop">
    <b>{{ $t('_spiderBuildTip') }}</b>
  </div>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" [nzNoColon]="true">{{
      $t('_spiderTitle')
    }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <nz-radio-group formControlName="spiderTitle">
        <label nz-radio nzValue="NO">{{ $t('_notSpider') }}</label>
        <label nz-radio nzValue="EMPTY">{{ $t('_spiderEmpty') }}</label>
        <label nz-radio nzValue="ALWAYS">{{ $t('_spiderAlways') }}</label>
      </nz-radio-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" [nzNoColon]="true">{{
      $t('_spiderIcon')
    }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <nz-radio-group formControlName="spiderIcon">
        <label nz-radio nzValue="NO">{{ $t('_notSpider') }}</label>
        <label nz-radio nzValue="EMPTY">{{ $t('_spiderEmpty') }}</label>
        <label nz-radio nzValue="ALWAYS">{{ $t('_spiderAlways') }}</label>
      </nz-radio-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" [nzNoColon]="true">{{
      $t('_spiderDesc')
    }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <nz-radio-group formControlName="spiderDescription">
        <label nz-radio nzValue="NO">{{ $t('_notSpider') }}</label>
        <label nz-radio nzValue="EMPTY">{{ $t('_spiderEmpty') }}</label>
        <label nz-radio nzValue="ALWAYS">{{ $t('_spiderAlways') }}</label>
      </nz-radio-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4" [nzNoColon]="true">{{
      $t('_spiderStatus')
    }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <label nz-checkbox formControlName="checkUrl">{{
        $t('_checkStatus')
      }}</label>
    </nz-form-control>
  </nz-form-item>

  <!-- <nz-form-item *ngIf="isSelfDevelop">
    <nz-form-label [nzSpan]="4" [nzNoColon]="true">{{
      $t('_spiderImg')
    }}</nz-form-label>
    <nz-form-control [nzSpan]="20">
      <nz-radio-group formControlName="spiderImg">
        <label nz-radio nzValue="NO">{{ $t('_notSpider') }}</label>
        <label nz-radio nzValue="EMPTY">{{ $t('_spiderEmpty') }}</label>
        <label nz-radio nzValue="ALWAYS">{{ $t('_spiderAlways') }}</label>
      </nz-radio-group>
    </nz-form-control>
  </nz-form-item> -->

  <nz-form-item>
    <nz-form-label [nzSpan]="4">{{ $t('_spiderQty') }}</nz-form-label>
    <nz-form-control [nzSpan]="10">
      <nz-slider
        formControlName="spiderQty"
        [nzMin]="0"
        [nzMax]="5000"
      ></nz-slider>
      <div>{{ $t('_spiderQtyTip') }}</div>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzSpan]="4">{{ $t('_accessTimeout') }}</nz-form-label>
    <nz-form-control [nzSpan]="10">
      <input nz-input formControlName="spiderTimeout" />
      <p class="mt-2.5">{{ $t('_accessTimeoutTip') }}</p>
    </nz-form-control>
  </nz-form-item>

  <button
    *ngIf="isSelfDevelop"
    nz-button
    nzType="primary"
    [nzLoading]="submitting"
    (click)="handleSpider()"
  >
    现在爬取
  </button>

  <div class="bottom-bar">
    <button
      nz-button
      nzType="primary"
      [nzLoading]="submitting"
      (click)="handleSubmit()"
    >
      {{ $t('_save') }}
    </button>
  </div>
</form>
